import React from 'react';
import { Flex, WingBlank, WhiteSpace, List,Card, Progress } from 'antd-mobile';

const { Item, Item: { Brief } } = List;
const scoreLabels = ['平和质', '气虚质', '阳虚质', '阴虚质', '痰湿质', '湿热质', '血瘀质', '气郁质', '特禀质'];

export default function ScaleReport({ report1, report2, report3, ...rest }) { 
  window.scrollTo(0, 0);
  let Report1, Report2;

  // if(report1 && report1.substring(5,8) == '倾向是'){
  //   Report1 = report1.replace("、", " ; ");
  // }else{
  //   Report1 = report1;
  // }


  if(report2){
      Report2 = report2.replace(/@/g," "); 
  }else if(report2 == ""){
      Report2 = "请咨询相关医生";
  }

  return (
    <WingBlank size="md">
      <List wrap>
        <Item>
          <Flex justify="center">{rest.Title}</Flex>
          <WhiteSpace/>
          <Flex justify="end">
              <div style={{fontSize: '0.25rem'}}>
                  {rest.createTime}
              </div>
          </Flex>
        </Item>
        <Item >
          体质类型：
          <Brief style={{whiteSpace: "normal",textIndent: "2em"}}>
            {report1}
          </Brief>
          <WhiteSpace size="lg" />
        </Item>
        <Item >
          易发疾病：
          <Brief style={{whiteSpace: "normal",textIndent: "2em"}}>
            {Report2}
          </Brief>
          <WhiteSpace size="lg" />
        </Item>
        <Item >
          体质得分：
          <Brief>
            {report3 &&
              report3.split(';').map((percent, i) => (
                <div key={i}>
                  <div style={{ display: 'inline-block', width: "1.6rem" }}>
                    {scoreLabels[i]}
                  </div>
                  <div style={{ display: 'inline-block', width: "3rem" }}>
                    <Progress position="normal" unfilled="hide" percent={percent} />
                  </div>
                  <span style={{ marginLeft: "0.2rem", color: '#aa4929',width: "4em" }}>
                    {percent}
                  </span>
                  <WhiteSpace />
                </div>
              ))}
          </Brief>
        </Item>
        {rest.children}
      </List>
    </WingBlank>
  );
}
